<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <!-- 失去光标改变 -->
        <input type="text" v-model.lazy="inp.lazy"><br>
        <!-- 必须输入数字 -->
        <input type="text" v-model.number="inp.number"><br>
        <!-- 去除首尾空格 -->
        <input type="text" v-model.trim="inp.trim">
        <div>{{ inp }}</div>
        <!-- 只触发一次 -->
        <button @click.once="changeNum">once</button>
        <!-- 只在绑定元素上触发 -->
        <div @click.self="changeNum" style="padding: 20px;width: 100px; margin: 0 auto;" class="bg-info">
            <button>self</button>
        </div>
        <!-- 阻止冒泡 -->
        <div @click="changeNum" style="padding: 20px;width: 100px; margin: 0 auto;" class="bg-info">
            <!-- <button @click="changeNum">stop</button> -->
            <button @click.stop="changeNum">stop</button>
        </div>
        <!-- 阻止默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="changeNum">prevent</a><br>
        <!-- 键盘修饰 -->
         <input type="text" @keyup.enter="changeNum"><br>
         <input type="text" @keydown.tab="changeNum">
        <div>{{ num }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            num: 0,
            inp: {
                lazy: '',
                number: '',
                trim: ''
            }
        }
    },
    methods: {
        changeNum() {
            this.num++
        }
    }
}
</script>
<style></style>